<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BP系统</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/data.js"></script>
    <script src="./js/index.js"></script>
</head>

<body>

    <!-- 外包容器 -->
    <div id="wrap">
        <!-- 盖住布div -->
        <div id="canvas">
            <!-- 展示求生者 -->
            <ul class="showsurvivor">
                <div>
                    <img src="" alt="">
                    <p>求生者1</p>
                </div>
                <div>
                    <img src="" alt="">
                    <p>求生者2</p>
                </div>
                <div>
                    <img src="" alt="">
                    <p>求生者3</p>
                </div>
                <div>
                    <img src="" alt="">
                    <p>求生者4</p>
                </div>
            </ul>
            <!-- 展示监管者 -->
            <div class="showhunter">
                    <img src="" alt="">
                    <p>监管者</p>
            </div>
        </div>
        <!-- 导航栏开始 -->
        <div id="banner">
            <!-- 左侧区域 -->
            <div class="left">
                <img src="./images/survivor.png">
                <div id="box">
                    <h1>ASG T1</h1>
                    <p>
                        W<span id="lwin">0</span>&nbsp;&nbsp;
                        D<span id="ldraw">0</span>&nbsp;&nbsp;
                        L<span id="llose">0</span>&nbsp;&nbsp;
                    </p>
                </div>
            </div>
            <!-- 中间区域 -->
            <div class="middle">
                <h1>VS</h1>
                <p>请选择赛制</p>
            </div>
            <!-- 右侧区域 -->
            <div class="right">
                <img src="./images/hunter.png">
                <div id="box">
                    <h1>ASG T2</h1>
                  <p>
                    W<span id="rwin">0</span>&nbsp;&nbsp;
                    D<span id="rdraw">0</span>&nbsp;&nbsp;
                    L<span id="rlose">0</span>&nbsp;&nbsp;
                  </p>
                </div>
            </div>
        </div>
        <!-- 导航栏结束 -->

        <!-- 中间区域开始 -->
        <div id="maincontent">
            <!-- bp画面区域开始 -->
            <div class="contentWrap">
                <button id="btn01">点击选择赛制</button>
                <br>
                <button id="btn02">点击更换地图</button>
                <br>
                <button id="btn03">开始</button>
                <br>
                <button id="btn04">修改队名</button>
                <br>
                <button id="btn05">X</button>
                <!-- 监管者角色框开始 -->
                <div class="hunterchoosebox">
                    <ul></ul>
                </div>
                <!-- 监管者角色框结束 -->
             
                <!-- 求生者角色框开始 -->
                <div class="survivorchoosebox">
                    <ul></ul>
                </div>
                <!-- 求生者角色框结束 -->

                <!-- 修改战队信息开始 -->
                <div class="changeTeamDetial">
                    <!-- team1 -->
                     <h2>战队1的名字</h2>
                     <input type="text" id="team1">
                     <!-- team2 -->
                     <h2>战队2的名字</h2>
                     <input type="text" id="team2">
                     <button id="change">改变队伍名称</button>
                     <button id="exchange">双方换边</button>
                     <div class="division"></div>
                     <!-- 底部设置WDL -->
                     <div class="footerWrap">
                        <div class="left">
                            <h1>左侧战队WDL值调整</h1>
                            <div id="leftwrap">
                                <h2>W</h2>
                                <button id="addlw">+</button>
                                <button id="sublw">-</button>
                            </div>
                            <div id="leftwrap">
                                <h2>D</h2>
                                <button id="addld">+</button>
                                <button id="subld">-</button>
                            </div>
                            <div id="leftwrap">
                                <h2>L</h2>
                                <button id="addll">+</button>
                                <button id="subll">-</button>
                            </div>
                        </div>
                        <div class="right">
                            <h1>右侧战队WDL值调整</h1>
                            <div id="rightwrap">
                                <h2>W</h2>
                                <button id="addrw">+</button>
                                <button id="subrw">-</button>
                            </div>
                            <div id="rightwrap">
                                <h2>D</h2>
                                <button id="addrd">+</button>
                                <button id="subrd">-</button>
                            </div>
                            <div id="rightwrap">
                                <h2>L</h2>
                                <button id="addrl">+</button>
                                <button id="subrl">-</button>
                            </div>
                        </div>
                        <div id="clearWDLWrap">
                             <div class="clearWDL">清除WDL</div>
                        </div>
                     </div>
                </div>
                <!-- 修改战队信息结束 -->
            </div>
            <!-- bp画面区域结束 -->

            <!-- 求生者BAN图标区域 -->
            <ul class="survivor-ban">
                <li><img src="./images/ban.png"></li>
                <li><img src="./images/ban.png"></li>
            </ul>
            <!-- 监管者BAN图标区域 -->
            <ul class="hunter-ban">
                <li><img src="./images/ban.png"></li>
                <li><img src="./images/ban.png"></li>
                <li><img src="./images/ban.png"></li>
                <li><img src="./images/ban.png"></li>
                <li><img src="./images/ban.png"></li>
            </ul>

        </div>
        <!-- 中间区域结束 -->


        <!-- bp环节开始 -->
        <div id="bpListWrap">
            <!-- 求生者选区 -->
            <ul class="surList">
                <li>
                    <div class="wrap">
                        <img src="./images/leftteam.jpg" alt="">
                    </div>
                    <div class="name">
                        <h1>待选择...</h1>
                        <p>求生者1</p>
                    </div>
                </li>
                <li>
                    <div class="wrap">
                        <img src="./images/leftteam.jpg" alt="">
                    </div>
                    <div class="name">
                        <h1>待选择...</h1>
                        <p>求生者2</p>
                    </div>
                </li>
                <li>
                    <div class="wrap">
                        <img src="./images/leftteam.jpg" alt="">
                    </div>
                    <div class="name">
                        <h1>待选择...</h1>
                        <p>求生者3</p>
                    </div>
                </li>
                <li>
                    <div class="wrap">
                        <img src="./images/leftteam.jpg" alt="">
                    </div>
                    <div class="name">
                        <h1>待选择...</h1>
                        <p>求生者4</p>
                    </div>
                </li>
            </ul>

            <!-- 地图选择 -->
            <div class="map">
                <h1>BP即将开始</h1>
                <!-- 广告 -->
                <div class="advertisement">
                    <h2>[广告]Koi粉丝群:475110869</h2>
                    <h2>[广告]千秋ZBR粉丝群:2635047706</h2>
                    <h2>[广告]KOOK语音,一个好用的语音工具</h2>
                    <p>所选地图:军工厂</p>
                </div>
                <div class="maplist">
                    <img src="./images/map/1.png" alt="">
                </div>
            </div>

            <!-- 监管者选择 -->
            <div class="hunterchoose">
                <div class="wrap">
                    <img src="./images/rightteam.jpg" alt="">
                </div>
                <div class="name">
                    <h1>待选择...</h1>
                    <p>监管者</p>
                </div>
            </div>

        </div>
        <!-- bp结束开始 -->
    </div>
</body>

</html>